<template>
  <div class="box">
    <span class="lbt"></span>
    <div :class="['item',item.active?'active':'']"  v-for="(item,ix) of listArr" :key="ix" @click="onSelect(ix)">
      <span  :class="{lt:item.active}"></span>
      <img class="cursor" src="./cursor.png">
      {{ item.title }}
      <span :class="{bt:item.active}"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bar-header',
  props: {
    activeIndex:0,
    list: Array,
  },
  data() {
    return {
      active: 0,
      listArr: [],
    };
  },
  created() {
    this.listArr = [...this.list];
    this.reset();
  },
  methods: {
    reset() {
      this.listArr.forEach(i => i.active = false);
      this.listArr[0].active = true;
    },
    onSelect(ix) {
      this.listArr.forEach(i => i.active = false);
      this.listArr[ix].active = true;
      console.log('this.listArr',this.listArr)
      this.$forceUpdate()
      this.$emit('update:activeIndex',ix)
    },
  },
};
</script>


<style scoped lang="scss">
.box {
  position: relative;
  width: 597px;
  margin-left: 3px;
  height: 46px;
  background-image: linear-gradient(90deg,
    #102a7b 0%,
    rgba(16, 42, 122, 0.2) 100%);
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(270deg,
    rgba(7, 55, 137, 0.4) 0%,
    #0052d2 100%);
  border-image-slice: 1;
.active{
  color: #fff!important;
}
  .lbt {
    position: absolute;
    left: -4px;
    width: 4px;
    height: 46px;
    background-color: #1381fc;
    box-shadow: 1px 1px 6px 0px #1380fc;
  }

  .item {
    position: relative;
    width: 189px;
    cursor: pointer;
    height: 46px;
    display: inline-block;
    background-image: linear-gradient(90deg,
      #0a32af 0%,
      #102a7a 100%);
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(270deg,
      #073789 0%,
      rgba(6, 61, 152, 0.21) 21%,
      rgba(5, 67, 168, 0.41) 41%,
      rgba(2, 74, 189, 0.71) 71%,
      #0052d2 100%);
    border-image-slice: 1;
    font-family: SourceHanSansCN-Bold;
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    line-height: 46px;
    letter-spacing: 0px;
    color: #e2ebf1;
    .bt {
      position: absolute;
      bottom: 0;
      left: 8px;
      width: 168px;
      height: 3px;
      background-image: linear-gradient(90deg,
        #33b0ff 0%,
        rgba(39, 130, 255, 0.5) 100%);
    }

    .lt {
      position: absolute;
      left: 4px;
      top: 10px;
      width: 3px;
      height: 26px;
      background-color: #00fac8;
      box-shadow: 1px 1px 6px 0px #00fac8;
      border-radius: 2px;
    }
  }

  .cursor {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    line-height: 46px;
    vertical-align: middle;
    display: inline-block;
  }


}

</style>
